import { Button, Flex } from 'antd'
import { getUserInfo } from '@/api/user'


const JWTToken = () => {
  const [currentToken, setCurrentToken] = useState('')
  const [currentRefreshToken, setCurrentRefreshToken] = useState('')
  useEffect(() => {
    setCurrentToken(localStorage.getItem('accessToken') as string)
    setCurrentRefreshToken(sessionStorage.getItem('refreshToken') as string)
  }, [])
  // 更改短期token
  const onClearToken = () => {
    localStorage.setItem('accessToken', '1234567890')
    setCurrentToken(localStorage.getItem('accessToken') as string)
  }
  // 调用接口
  const onClick = async () => {
    console.log('请求接口')
    const res = await getUserInfo({
      start_time: '2024-12-03T10:40:34Z',
      end_time: '2024-11-03T10:40:34Z',
      offset: 0,
      limit: 10,
      group_by: 'drone_id',
      order: 'desc',
      order_by: 'created_time',
    })
    console.log('🌺👉 请求接口==》', res)
  }

  return (
    <div>
      <Flex justify="center" gap="middle">
        <div
          style={{
            display: 'block',
            width: '200px',
            wordWrap: 'break-word',
          }}
        >
          当前的短期token是：{currentToken}
        </div>
        <div
          style={{
            display: 'block',
            width: '200px',
            wordWrap: 'break-word',
          }}
        >
          当前的长期token是：{currentRefreshToken}
        </div>
      </Flex>
      <br />
      <Flex style={{ marginTop: '80px' }} justify="center" gap="middle">
        <Button type="primary" onClick={onClearToken}>
          更改短期token
        </Button>
        <Button type="primary" onClick={onClick}>
          请求接口
        </Button>
      </Flex>
    </div>
  )
}
export default JWTToken
